<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@page import="com.joinlabs.entity.Wares"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("path", path);
		
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
    	<link href='/common/css/product/style.css' rel="stylesheet" type="text/css"/>
   		


		<script type="text/javascript">
		$(document).ready(function(){
		
			//初始化 页码 选中状态
			$(".pager>li[page="+conditionBean.curPage+"][class!=first][class!=last]").addClass("active");
		
		
			$(".div-border").hover(
			function(){
				$(this).addClass("border-div");
				$(this).find(".div-btn").addClass("show-div");
			},
			function(){
				$(this).removeClass("border-div");
				$(this).find(".div-btn").removeClass("show-div");
			}
			);
			
			
			
			//分页事件的监听
			$(".pager>li[page]").on("click",function(){
			
				//设置条件bean中的 页码
				conditionBean.curPage = $(this).attr("page");
				
				//重新加载界面
				$(".main-classify").load(
				"/product/showfy",
				conditionBean,
				function(){}
				
				); 
				
			
			});
			
			
			
			//指定跳转界面的监听
			$(".go-page").on("click",function(){
				//input的值
				var page = $(this).prev().find("input").val();
				
				if(page === "" || page == null){

					//设置弹出面板参数
				
					$(this).attr("data-content","请输入页码");
					
					
				
					return;
				}


				if(isNaN(page)){
					//非数值
					$(this).attr("data-content","请输入数字");
					
					
					return;
				}
				
				if(page <= 0 || page > parseInt('${page.totalPage}')){
					//请输入正确页码
					$(this).attr("data-content","请输入正确页码[1,${page.totalPage}]");
					
					
					return;
				} 
				
				
				$(this).attr("data-content","正在跳转到指定页...");
				
				
				//设置查询bean
				conditionBean.curPage = page;
				//发送请求，重新加载数据
				$(".main-classify").load(
					"/product/showfy",
					conditionBean,
					function(){}
				
				); 
				
				
				
			});
			
			$(".go-page").hover(function(){},function(){
				$('[data-toggle="popover"]').popover('hide');
			});
			
			
		});
	</script>
    </head>
    <body>
    	

		<div class="danpin center"  id="xiaomiphone">
			
			<div class="main center">
			
				<c:forEach items="${wareslist}" var="wares" varStatus="waresStatus"  begin="${sessionScope.pageBean.startIndex}" end="${sessionScope.pageBean.endIndex-1}">
				<div class="mingxing fl mb20" style="margin-left:30px;border:2px solid #fff;width:230px;cursor:pointer;margin-right:14px;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
					<div class="sub_mingxing"><a href="/product/pro?pid=${wares.waresId}" target="_blank"><img src="http://localhost:8083/fileserver/wares/${wares.imgA}" alt=""></a></div>
					<div class="pinpai"><a href="/product/pro?pid=${wares.waresId}" target="_blank">${wares.waresName}</a></div>
					<div class="youhui">${wares.waresColor1}</div>
					<div class="jiage">销量：${wares.salesVolume}</div>
					<div class="jiage">${wares.waresPrice1}元</div>
				</div>
			
				
				<c:if test="${waresStatus.count % 4 == 0}"><div class="clear"></div></c:if>
				</c:forEach>
			
			<c:if test="${nonull == 'kia'}">
			
			<img src="http://localhost:8083/fileserver/wares/pika.gif" style="width:200px;height: 200px;margin:0px auto;display:block;">
			
			<h1  style="text-align:center;font-size:30px;">亲！没有找到您要的宝贝</h1>
		
			</c:if>

					
			</div>
			
			<center style="margin-top:800px;">
			<ul class="pager" style="margin-bottom: 0px">
  				<li class="first" page="1"><a>首页</a></li>
  				
				
  				<c:forEach 
  					varStatus="statu" 
  					begin="${sessionScope.pageBean.curPage-2>0?sessionScope.pageBean.curPage-2:1}" 	
					end="${sessionScope.pageBean.curPage+2<=sessionScope.pageBean.totalPage?sessionScope.pageBean.curPage+2:sessionScope.pageBean.totalPage}"
  					step="1">
  				
 
  				
  					<li page="${statu.index}"><a>${statu.index}</a></li>
  					
  				
  				</c:forEach>
  				
  				<li class="last" page="${sessionScope.pageBean.totalPage}"><a>尾页</a></li>
  				<li class="search-page">
  					<div class="form-group">
          				<input type="text" class="form-control" placeholder="页码" style="width: 50px">
        			</div>
        			<button type="button" data-tip-class="popover-warning" data-content="aaa"  title="提示" data-toggle="popover" data-placement="top" class="btn btn-default go-page">跳转</button>
  					<!-- 初始化 弹出面板 -->
  					<script type="text/javascript">
  						$('[data-toggle="popover"]').popover();
  					
  					</script>
  				
  				</li>
  				
			</ul>
			
			<span class="label label-info" style="font-size:14px;background-color:#671B0D;">共${sessionScope.pageBean.totalPage}页</span>
			&nbsp;
			<span class="label label-success" style="font-size:14px;background-color:skyblue;">${sessionScope.pageBean.totalCount}条数据</span>
		</center>
	
		</div>
		
	</body>

 	
</html>